<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo</title>
  <link href="/static/css/layui.css" rel="stylesheet">
</head>
<body>
<div id="power_list"></div>

<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/jquery.cookie.js"></script>
<script src="/static/js/base.js"></script>
<script src="/static/layui.js"></script>
<script>
layui.use(function(){
  var tree = layui.tree;

  // 模拟数据
  let data = JSON.parse('{{ powers | tojson | safe}}');
  // 渲染
  tree.render({
    elem: '#power_list',
    data: data,
    customName: { // 自定义 data 字段名 --- 2.8.14+
      id: 'id',
      title: 'name',
      children: 'children',
      checked:"checked"
    },
    edit: ['del'], // 开启节点的右侧操作图标
    operate: function(obj){
      var type = obj.type; // 得到操作类型：add、edit、del
      var data = obj.data; // 得到当前节点的数据

      if (type === "del"){
          layer.confirm('确定删除该权限？', {
              btn: ['确定', '取消'] //按钮
          }, function(){
              $.ajax({
                  url: "/power/delete_power",
                  type: "POST",
                  data: JSON.stringify({
                      "id": data.id
                  }),
                  dataType: "json",
                  success: function (response) {
                      layer.msg(response.data);
                      location.reload();
                  }
              });
          });
      }
    }
  });

});
</script>

</body>
</html>